<template>
    <div class="user-container">
        <!-- 操作栏 -->
        <el-card class="box-card" :body-style="{padding: '8px'}" shadow="hover">
            <el-input class="user-input" v-model="searchText" placeholder="请输入手机号" size="small" clearable></el-input>
            <el-button type="primary" size="small" style="margin-left: 5px;" @click="search">搜 索</el-button>
        </el-card>
        <!-- 表格 -->
        <el-card class="box-card" :body-style="{padding: '8px'}" shadow="hover">
            <page-table
                    :pager="true"
                    :tabIndex="true"
                    :refresh="tableInfo.refresh"
                    :init-curpage="tableInfo.initCurrentPage"
                    :data.sync="tableInfo.data"
                    :api="api_getUserList"
                    :query="tableInfoFilter.query"
                    :field-list="tableInfo.fieldList"
                    :handle="tableInfo.handle"
                    @handleClick="handleClick"
                    @handleEvent="handleEvent"
            />
        </el-card>
    </div>
</template>

<script>
import { api_getUserList } from '@/api/userMgmt';
import PageTable from '@/components/PageTable/index';
export default {
    name: 'use-center',
    components: { PageTable },
    data() {
        return {
            tableHeight: window.innerHeight-180,
            searchText: '',
            api_getUserList,
            tableInfoData: [],
            refresh: 1
        };
    },
    computed: {
        tableInfoFilter() {
            return {
                query: {

                }
            };
        },
        tableInfo() {
            return {
                refresh: this.refresh,
                initCurrentPage: 1,
                data: this.tableInfoData,
                fieldList: [
                    { label: '手机号', value: 'phone' },
                    { label: '用户名', value: 'username' },
                    { label: '邮箱', value: 'email' },
                    { label: '所属公司', value: 'company' },
                    { label: '创建时间', value: 'createTime', type: 'time' }
                ],
                handle: {
                    fixed: 'right',
                    label: '操作',
                    width: '150',
                    btList: [
                        { label: '编辑', type: 'text', icon: 'el-icon-edit-outline', event: 'continueUpgrade', show: true },
                        { label: '冻结', type: 'text', icon: 'el-icon-lock', event: 'frozen', show: true },
                    ]
                }
            }
        }
    },
    methods: {
        search(){
            this.refresh += 1;
        },
        /* 点击按钮 */
        handleClick(event, data){
            console.log('按钮点击--', event, data);
        },
        /* 事件处理 */
        handleEvent(event, data){
            console.log('事件处理--', event, data);
            this.tableInfoData = data;
        },
    },
    created() {

    },
    mounted() {
        window.onresize = () => {
            return (() => {
                this.tableHeight = window.innerHeight-180;
            })();
        };
        //首次进入刷新页面
        this.search();
    },
}
</script>

<style lang="scss">
    .user-container .box-card {
        margin-bottom: 5px;
        width: 99%;
        margin-left: 5px;
    }
    .user-input {
        width: 12%;
    }

    .el-table .warning-row {
        background: oldlace;
    }
</style>
